<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="10" :sm="24">
            <a-form-item label="CourseId">
              <a-input placeholder="" v-model="queryParam.courseId"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="10" :sm="24">
            <a-form-item label="Date">
             <!-- <a-input placeholder="" v-model="queryParam.createTime"></a-input>-->
              <a-range-picker show-time
                v-model="queryParam.qtime"
                @change="handleChange"
                :format="dateFormat"
                style="width: 100%;"
              />

            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">Search</a-button>
              <a-button type="primary" @click="transactionSearchReset" icon="reload" style="margin-left: 8px">Reset</a-button>
              <!--<a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? 'UP' : 'DOWN' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>-->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAddCredit" :disabled="disabled" type="primary" icon="plus">Add Credit</a-button>
     <!-- <a-button type="primary" icon="download" @click="handleExportXls('account_transaction')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>-->
      <!-- 高级查询区域 -->
     <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>-->
      <!--bordered-->
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">
<!--
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-->
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <!--<a @click="handleCancel(record)">Cancel</a>-->
          <a-popconfirm title="Confirm to Cancel?" ok-text="Yes"  cancel-text="No" @confirm="() => handleCancel(record)">
                  <a v-if="cancelCheck(record)" :disabled="disabled">Cancel</a>
         </a-popconfirm>
          <a-button v-if="record.ccancel != 0 || record.isCancel != 0" type="link">-</a-button>
          <!-- <a @click="handleEdit(record)">Edit</a>-->

         <!-- <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">More <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">Details</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="Confirm to Delete?" @confirm="() => handleDelete(record.id)">
                  <a>Delete</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>-->
        </span>

      </a-table>
    </div>

<!--
    <account-transaction-modal ref="modalForm" @ok="modalFormOk"></account-transaction-modal>
-->
    <AddCreditModal ref="modalForm" @ok="modalFormOk"></AddCreditModal>
  </a-card>
</template>

<script>

  import '@assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import AddCreditModal from './modules/AddCreditModal'
  import {httpAction,getAction} from "@api/manage";

  export default {
    name: 'AccountTransactionList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      AddCreditModal
    },
    props: {
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //学生ID
      studentId: {
        type:Number
      }
    },
    data () {
      return {
        cancelParam:{},
        dateFormat: 'YYYY-MM-DD hh:mm:ss',
        disableMixinCreated:true,
        description: 'account_transaction管理页面',
        // 表头
        columns: [
          {
            title:'CourseID',
            align:"center",
            dataIndex: 'courseId',
            customRender:(text,record,index) => {
              if(text === 0){
                return "-"
              }else{
                return<a-popover title="Course Information">
                  <template slot="content" >
                    <p style="text-align:left;">Name：{record.transactionCourse.name}</p>
                    <p style="text-align:left;">Teacher：{record.transactionCourse.teacher}</p>
                    <p style="text-align:left;">Term：{record.transactionCourse.term}</p>
                  </template>
                  <a-button type="link">
                    {text}
                  </a-button>
                </a-popover>
              }
            },
          },
          {
            title:'Date',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title:'Amount',
            align:"center",
            dataIndex: 'strChangeAmount',
            customRender:(text,record,index) => {
              if(record.direction == '+'){
                return  <span style="color:red">{record.direction + text}</span>
              }else  if(record.direction == '-'){
                return <span style="color:green">{record.direction + text}</span>
              }
              return text;
            }
          },
          {
            title:'Available Credit',
            align:"center",
            dataIndex: 'strChangeAfterAmount'
          },
          {
            title:'Memo',
            align:"center",
            dataIndex: 'remark'
          },
          {
            title: '',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/sistersophie/accountTransaction/list",
          delete: "/sistersophie/accountTransaction/delete",
          deleteBatch: "/sistersophie/accountTransaction/deleteBatch",
          exportXlsUrl: "/sistersophie/accountTransaction/exportXls",
          importExcelUrl: "sistersophie/accountTransaction/importExcel",
          cancel: "/sistersophie/accountTransaction/cancel",
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
      this.queryParam.studentId = this.studentId;
      this.loadData();
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
      formStudentId(){
          return this.studentId
      },
    },
    methods: {
      transactionSearchReset() {
        this.queryParam = {}
        this.queryParam.studentId = this.studentId;
        this.loadData(1);
      },
      cancelCheck(record){
        if(record.isCancel === 0 && record.ccancel === 0)
        return true;
        else
        return false;
      },
      handleAddCredit: function () {
        this.$refs.modalForm.addCredit(this.studentId);
        this.$refs.modalForm.title = "Add Credit";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleChange(dates,dateStrings){
        this.queryParam.createTime_begin = dateStrings[0];
        this.queryParam.createTime_end = dateStrings[1];
      },
      handleCancel(record){
        const that = this;
        this.cancelParam.id = record.id;
        let httpurl = this.url.cancel;
        let method = 'post';
        httpAction(httpurl,this.cancelParam,method).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.$emit('ok');
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          this.cancelParam = {};
          // 新增/修改 成功时，重载列表
          this.loadData();
          //清空列表选中
          this.onClearSelected()
        })
      },
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'int',value:'studentId',text:'studentId'})
        fieldList.push({type:'int',value:'accountId',text:'accountId'})
        fieldList.push({type:'number',value:'changeAmount',text:'变更金额'})
        fieldList.push({type:'int',value:'changeDirection',text:'变更方向 0=冻结 1=增加 2=减少'})
        fieldList.push({type:'string',value:'remark',text:'付款时间'})
        fieldList.push({type:'number',value:'changeBeforeAmount',text:'变更前金额'})
        fieldList.push({type:'number',value:'changeAfterAmount',text:'变更后金额'})
        fieldList.push({type:'string',value:'createName',text:'创建人'})
        fieldList.push({type:'string',value:'updateName',text:'更新人'})
        fieldList.push({type:'int',value:'isDelete',text:'删除标志，0=正常，1=删除'})
        fieldList.push({type:'int',value:'courseId',text:'课程ID'})
        fieldList.push({type:'int',value:'courseType',text:'课程类型 1=1v1课程 2=group class'})
        fieldList.push({type:'int',value:'invoiceId',text:'通知ID'})
        fieldList.push({type:'string',value:'extends',text:'拓展字段'})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>